<template>
    <div>
         <div class="herder">
             <div class="zuo">
              <div :class="key == item.id ? 'active' : ''" @click="okitem(item.id)" v-for="(item) in itemlist" :key="item.id" class="item">
                {{item.name}}
              </div>
             </div>
            <div v-if="key == 0" class="zhong">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-row type="flex">
                            <el-col>
                                  <el-form-item label="分类筛选">
                                     <el-col :span="11">
                                       <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                                     </el-col>
                                     <el-col class="line" :span="2">&nbsp;&nbsp;&nbsp;-</el-col>
                                     <el-col :span="11">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                                     </el-col>
                                   </el-form-item>
                            </el-col>
                            <el-col>
                                 <el-form-item label="课程名称">
                                     <!-- <el-select v-model="form.jobs_id" placeholder="请选择活动区域"> -->
                                        <!-- <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                      </el-select> -->
                                 </el-form-item>
                            </el-col>
                    </el-row>
                 </el-form>  
             </div>
             <div class="right">
                 <el-button  style="height:42px" v-if="key == 0" @click="addkecheng" class="addbtn">添加课程</el-button>
                 <el-button  v-if="key == 2"  @click="addrenyuan" class="addbtn">添加人员</el-button>
             </div>
         </div>

        <div  v-if="key == 0">
                <el-table
           :data="kechengdata"
           style="width: 100%"
           >
           <el-table-column
             prop="data.category_name"
             label="课程分类"
             >
           </el-table-column>
           <el-table-column
             prop="course_name"
             label="课程名称"
             width="180">
           </el-table-column>
           <el-table-column
             prop="address"
             label="视频"
             >
           </el-table-column>
           <el-table-column
             prop="prices"
             label="收费金额"
             >
           </el-table-column>
           <el-table-column
             prop="address"
             label="限制观看"
             >
             <template slot-scope="{row}">
                 <span v-for="(item,index) in row.jobs_id_list" :key="index">
                     <span  class="a" v-if ="item == 0">不限制</span>
                     <span  class="a" v-if ="item == 1">员工</span>
                     <span  class="a" v-if ="item == 2">管理</span>
                 </span>
             </template>    
           </el-table-column>
           <el-table-column
             prop="address"
             label="操作"
             >
             <template slot-scope="{row}">
                <el-dropdown 
                   slot="dropdown"
                  >
                   <span class="el-dropdown-link">
                    <!-- <img src="@/assets/css/yingxiao/矢量智能对象 拷贝 2.png" alt=""> -->
                     下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                   </span>
                   <el-dropdown-menu slot="dropdown">
                     <div @click="editkecheng(row)" class="itemcss">编辑</div>
                     <div @click="detkecheng(row)"    class="itemcss">删除</div>
                   </el-dropdown-menu>
                 </el-dropdown>
             </template>    
           </el-table-column>
        </el-table>
        <el-dialog
          title="添加课程"
          :visible.sync="dialogVisible"
          width="30%"
          >
          <el-form ref="form" :model="addkechengfrom" label-width="100px">
                <el-form-item label="课程分类：">
                   <!-- <el-radio v-model="radio" label="1">备选项</el-radio>
                   <el-radio v-model="radio" label="2">备选项</el-radio> -->
                </el-form-item>
                <el-form-item label="课程名称：">
                      <el-input v-model=" addkechengfrom.course_name"></el-input>
                </el-form-item>
                 <el-form-item label="限制观看：">
                           <el-select v-model="addkechengfrom.jobs_id" multiple placeholder="请选择">
                             <el-option
                               label="不限"
                               :value="0">
                             </el-option>
                             <el-option
                               label="员工"
                               :value="1">
                             </el-option>
                            <el-option
                               label="管理员"
                               :value="2">
                            </el-option>  
                             <el-option
                               label="用户"
                               :value="3">
                             </el-option>
                           </el-select>
                </el-form-item>
                 <el-form-item label="收费金额：">
                      <el-input v-model="addkechengfrom.prices"></el-input>
                </el-form-item>
                 <el-form-item label="上传视频：">
                      <!-- <el-upload
                        action="http://202.102.249.191:84/beautiful/store/file"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload> -->
                </el-form-item>
          </el-form>   
    
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="okbtn">确 定</el-button>
          </span>
        </el-dialog>
        </div>
        <div></div>
        <div  v-if="key == 2">
            <permissionset></permissionset>
        </div>
    </div>
</template>
<script>
import {kechenglist,getpermissionlist,editkechengitem} from "@/api/expend/index.js"
import {mapState,mapMutations,mapGetters} from "vuex"
import permissionset from "../compoents/permissionset"
export default {
    name:'kecheng',
    data(){
        return {
             options:[{
                value: 'zhinan',
                label: '指南',
                children:[]
              }
            ],
             dialogVisible:false,
             key:0,//tab默认选中
            itemlist:[{name:'全部课程',id:0},{name:'观看人员',id:1},
            {name:'权限设置',id:2}
            ],
            kechengdata:[],
            kechengfrom:{
                category_id:'',//分类列表
                course_name:'',//课程名称
                page:'1',//页码值
                limit:'10',//条数
                identification:'',
               
            },
            // 添加课程
            addkechengfrom:{
                identification:'',
                category_id:'',//课程分类id
                course_name:'',//课程名称
                 jobs_id:'',//分类员工
                 prices:'',//收费金额
                 video_url:'http:/.aliyun.com'//课程收费地址
            },
            form:{
                region:'',
            }
        }
    },
    methods:{
        //tab切换
        okitem(val) {
            console.log(val);
            this.key = val
        },
      //获取课程列表
       async  getkechenglist(){
       const data =  await  kechenglist(this.kechengfrom)
       if(data.code == 1) {
          this.$message({
          message :data.msg,
          type: 'success'
          });
        }
        this.kechengdata = data.data
      
       },
       //添加课程
       addkecheng(){
           this.addkechengfrom.category_id = this.kechengclassify[0].id //暂时写死
           this.dialogVisible =true
       },
       //编辑
       editkecheng(val){
         console.log(val);
         this.addkechengfrom=val
        //  editkechengitem()
         this.dialogVisible = true
       },
       //删除
       detkecheng(){},
       okbtn(){
         getpermissionlist(this.addkechengfrom)
       },
      //  权限添加人员
      addrenyuan(){
        console.log(666);
      },

    },
    computed:{
        ...mapState(['userInfo']),
        ...mapGetters(['kechengclassify'])
    },
    components:{
        permissionset
    },
    mounted(){
          this.addkechengfrom.identification = this.userInfo.identification
          this.getkechenglist()   
    }
}
</script>
<style lang="less" scoped>
.herder {
    display: flex;
    .zuo {
        flex: 20%;
    }
    .zhong {
        flex: 50%;

    }
    .right {
        flex: 30%;
        display: flex;
        justify-content: flex-end;
    }
}
 .zuo {
     display: flex;
     padding-left: 30px;
     & .item:nth-last-of-type(2) {
          border-left: 0;
     }
     & .item:nth-last-of-type(1) {
        border-left: 0;
     }
     .item {
         border: 1px solid #CCCCCC;
         width: 100px;
         height: 40px;
         line-height: 40px;
         text-align: center;
     }
     .active {
         background-color: #09A58B;
         color: #FFFFFF;
     } 
     
 }
 .a {
     margin-right: 10px;
 }

</style>